/* * @Author: hhy * @Date: 2019-01-31 15:38:18 * @Last Modified by: hhy * @Last
Modified time: 2019-04-16 17:45:25 * @文件说明: 无边框的下拉框 */
<template>
  <el-radio-group
    :value="value"
    @change="change"
    :size="size"
    v-bind="$attrs"
    :style="style"
  >
    <el-radio-button v-for="i in option" :key="i.value" :label="i.label">
      {{ i.value }}
    </el-radio-button>
  </el-radio-group>
</template>

<script>
import { defineComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  name: "all-select",
  model: {
    event: "change",
  },
  props: {
    query: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "default",
    },
    value: {
      type: [String, Number],
      default: "",
    },

    option: {
      type: Array,
      default() {
        return [
          {
            label: "0",
            value: "全部",
          },
          {
            label: "1",
            value: "今天",
          },
          {
            label: "2",
            value: "昨天",
          },
          {
            label: "3",
            value: "最近7天",
          },
          {
            label: "4",
            value: "最近30天",
          },
          {
            label: "5",
            value: "本月",
          },
          {
            label: "6",
            value: "本年",
          },
        ];
      },
    },
    width: {
      type: String,
      default: "",
    },
    showBorder: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["change"],
  computed: {
    style() {
      return {
        width: this.width + "px",
      };
    },
  },
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const change = (val) => {
      if (props.query) {
        const query = route.query;
        if (query.endTime) {
          delete query.endTime;
        }
        if (query.startTime) {
          delete query.startTime;
        }
        router.push({
          path: route.path,
          query: {
            ...query,
            [props.query]: val,
            page: 1,
          },
        });
      } else {
        context.emit("change", val);
      }
    };
    return {
      change,
    };
  },
});
</script>

